<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>jGame</title>
    <style type="text/css">
    html, body {margin:0;padding:0;} 
    #game {width:400px;height:600px;overflow:hidden;position:absolute;left:50%;top:50%;margin:-300px 0 0 -200px;background-image:url(ciel.png);background-position:0 0;background-repeat:repeat;border:2px solid red;}
    #ship {height:20px;width:20px;background:#fff;position:absolute;}
    #paneScore {position:absolute;left:0;top:0;width:100%;height:50px;width:100%;background:#000;opacity:.7;z-index:10;}
    #score {position:absolute;left:0;top:0;color:red;}
    </style>
  </head>
  <body>
    <div id="game">
      <div id="paneScore"><div id="score">SCORE : 0</div></div>
      <div id="ship"></div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
      var $game = $('#game');
      var $ship = $('#ship');
      var $score = $('#score');
      var xMax  = $game.width() - $ship.height();
      var yMax  = $game.height() - $ship.width();
      var x     = xMax*.5 - $ship.width()*.5;
      var y     = yMax - $ship.height();
      var key   = [0, 0, 0, 0, 0];
      var frame = 0;
      var speed = 5;
      var ufo   = [];
      var fire  = [];
      var score = 0;
      var audio = window.Audio && new Audio("shoot.wav");
      
      function init(){
        $(document).keydown(function(e){
          switch(e.keyCode)
          {
            case 37: key[0] = 1; break;
        		case 38: key[1] = 1; break;
        		case 39: key[2] = 1; break;
        		case 40: key[3] = 1; break;
        		case 32: key[4] = 1; break;
          }
        }).keyup(function(e){
          switch(e.keyCode)
          {
            case 37: key[0] = 0; break;
        		case 38: key[1] = 0; break;
        		case 39: key[2] = 0; break;
        		case 40: key[3] = 0; break;
        		case 32: key[4] = 0; break;
          }
        });
        
        $ship.css({
          left  : x,
          top   : y
        });
        
        setInterval(refresh, 25)
      }
      
      function refresh(){
        ++frame;
        
        if(key[0] && x>0)
          x = x-speed
          
        if(key[1] && y>0)
          y = y-speed
        
        if(key[2] && x<xMax)
          x = x+speed
          
        if(key[3] && y<yMax)
          y = y+speed
        
        $ship.css({
          left  : x,
          top   : y
        });
        
        refreshGame();
        
        if(key[4] && frame%10 == 0)
        {
          audio && audio.play();
          fire.push(new Fire())
        }
        
        checkCollision();
      }
      
      function checkCollision(){
        var sprite1xMin, sprite1xMax, sprite1yMin, sprite1yMax, sprite2xMin, sprite2xMac, sprite2yMin, sprite2yMax, isX, isY;
        
        for(var i=0; i<ufo.length; i++)
        {
          sprite1xMin = ufo[i].x;
          sprite1xMax = ufo[i].x + ufo[i].size;
          sprite1yMin = ufo[i].y;
          sprite1yMax = ufo[i].y + ufo[i].size;
            
          for(var j=0; j<fire.length; j++)
          { 
            sprite2xMin = fire[j].x;
            sprite2xMax = fire[j].x + fire[j].size;
            sprite2yMin = fire[j].y;
            sprite2yMax = fire[j].y + fire[j].size;
            
            isX = (sprite1xMin >= sprite2xMin && sprite1xMin <= sprite2xMax) || (sprite2xMin >= sprite1xMin && sprite2xMin <= sprite1xMax);
            isY = (sprite1yMin >= sprite2yMin && sprite1yMin <= sprite2yMax) || (sprite2yMin >= sprite1yMin && sprite2yMin <= sprite1yMax);
            
            if(isX && isY)  
            {
              ufo[i].isDead = true;
              fire[j].isDead = true;
            } 
          }
        } 
      }
      
      function printScore(){
        $score.text('SCORE : '+score);
      }
      
      function refreshGame(){
        
        if(frame%50 == 0)
        {
          ufo.push(new UFO());
        }
        
        $game.css({'background-position':'0 ' + (frame+5) + 'px'});
          
        for(var i=0; i<ufo.length; ++i)
        { 
          if(ufo[i].y > yMax || ufo[i].isDead)
          {
            ufo[i].destroy();
            ufo[i] = null;
            ufo.splice(i, 1);
          }
          else
          {
            ufo[i].move();
          }
        }
        
        for(var i=0; i<fire.length; ++i)
        {
          if(fire[i].y < -10 || fire[i].isDead)
          {
            fire[i].destroy();
            fire[i] = null;
            fire.splice(i, 1);
          }
          else
          {
            fire[i].move();
          }
        }
      }
      
      function Fire(){
        this.container = $('<div/>');
        this.speed      = 20;
        this.color      = 'red';
        this.x          = x + $ship.width()*.5;
        this.y          = y - $ship.height();
        this.isDead     = false;
        this.init();
      }
      
      Fire.prototype = {
        init : function(){
          this.container.css({
            'position'    : 'absolute',
            'background'  : this.color,
            'height'      : '20px',
            'width'       : '2px',
            'left'        : this.x,
            'top'         : this.y
          }).appendTo($game);
        },
        destroy : function(){
          this.container.remove();
        },
        move : function(){
          this.y = this.y - this.speed;
          this.container.css({
            'top' : this.y
          });
        }
      }
      
      function UFO(){
        this.container = $('<div/>');
        this.speed     = 6;
        this.size      = 20;
        this.color     = 'silver';
        this.x         = xMax * (1 - Math.random());
        this.y         = -this.size;
        this.isDead    = false;
        this.init();
      }
      
      UFO.prototype = {
        init : function(){
          this.container.css({
            'position'    : 'absolute',
            'background'  : this.color,
            'height'      : this.size,
            'width'       : this.size,
            'left'        : this.x,
            'top'         : this.y
          }).appendTo($game);
        },
        destroy : function(){
          this.container.remove();
          if(this.isDead)
          {
            score = score + 10;
            printScore();
          }
        },
        move : function(){
          this.y = this.y + this.speed;
          this.container.css({
            'top' : this.y
          });
        }
      }
      
      $(function(){
        init();
      });
    </script>
  </body>
</html>
